import { useState } from "preact/hooks";
import { HeaderConf } from "./type";



export function Header(prop: HeaderConf) {
  const { setIfSrc, setMode, setHide } = prop
  const [ url, setUrl ] = useState('')
  return (
    <>
      <div class={ 'header-panel' }>
        <div class={ 'flex-c-c left' }>
          <div class={ 'mod-btn' } onClick={ () => setMode() }></div>
          <div class={ 'input-panel' }>
            <input type="text" onChange={ (e) => setUrl((e.target as HTMLInputElement)?.value) } />
          </div>
          <button class={ 'flex-c-c' } onClick={ () => setIfSrc(url) }>🚀</button>
          <div onClick={ () => setHide() } class={ 'flex-c-c hide-btn' }>
          💻
          </div>
        </div>
        <div></div>
      </div>
    </>
  )
}

